<template>
	<view class="main">
		<view class="header">
			<image class="header_img" src="/static/img/library/problem/index_title_icon.png" mode="scaleToFill" />
			<view class="header_search" @click="goSearch">
				<view class="header_search_text">输入搜索词</view>
				<view class="header_search_btn">搜索一下</view>
			</view>
		</view>
		<view class="content">
			<u-sticky bgColor="#fff">
				<u-tabs :list="tabList" @click="toggle"></u-tabs>
			</u-sticky>

			<scroll-view class="scroll" style="height: calc(100vh - 470rpx)" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="isPullDown" @refresherrefresh="pullDownFnc" @scrolltolower="loadMore">
				<view class="list" v-for="(item, index) in list" :key="index" @click="go(item)">
					<view class="title">{{ item.title }}</view>
					<view class="item_con">
						<view class="item_txt" v-html="item.answer_content"></view>
						<!-- <view class="item_btn" v-if="item.answer_content.length > 100">...详情</view> -->
					</view>
					<view class="time">{{ item.createTime }}</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script  type="text/javascript" src="plus-confusion://../library/problem/index/index"></script>

<style lang="scss" scoped>
.main {
	background: #f3f5f7 !important;
	// min-height: 100vh;

	.header {
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 65rpx;

		.header_img {
			display: inline-block;
			width: 396rpx;
			height: 50rpx;
			margin: 56rpx 0 50rpx 0;
		}

		.header_search {
			display: flex;

			.header_search_text {
				width: 520rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
				border: 2rpx solid #1C87F3;
				line-height: 80rpx;
				padding-left: 32rpx;
				font-size: 24rpx;
				color: #9E9E9E;
			}

			.header_search_btn {
				width: 154rpx;
				height: 80rpx;
				background: #1C87F3;
				border-radius: 6rpx;
				margin-left: -19rpx;
				line-height: 80rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}


	}

	.content {
		margin-top: 13rpx;
		background: #fff;
		padding: 30rpx 32rpx 0 32rpx;

		.scroll {
			margin-top: 50rpx;

			.list {
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #E7E7E7;
				margin-bottom: 40rpx;
				overflow: hidden;

				.title {
					font-size: 30rpx;
					font-weight: 600;
					color: #3D3D3D;
					line-height: 43rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 15rpx;
				}

				.item_con {
					position: relative;
					height: 80rpx;
					overflow: hidden;

					.item_txt {
						font-size: 22rpx;
						color: #999999;
						line-height: 32rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.item_btn {
						background: #fff;
						width: auto;
						position: absolute;
						bottom: 22rpx;
						right: 0;
						font-size: 22rpx;
						color: #4291FF;
					}
				}

				.time {
						text-align: end;
						font-size: 22rpx;
						color: #999999;
						line-height: 32rpx;
					}
			}
		}
	}
}
</style>
